 <#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "专业能力红绿灯预警" "">
</@panel.header>
<@panel.body>
<!-- Bread crumb -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3>专业能力红绿灯预警</h3> </div>
    <div class="col-md-7 align-self-center">&nbsp;</div>
</div>
<!-- End Bread crumb -->
<!-- Container fluid  -->
<div class="container-fluid">
    <!-- Start Page Content -->                
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
				<div class="custom-card-header quick-bar">
					<div class="hint">&nbsp;</div>
					<@seachpanel.filterbox></@seachpanel.filterbox>
					<button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
				</div>
            
                <div class="card-body">
                    <table id="id-trafic-table" class="table table-bordered table-cell-wrap m-t-20"  cellspacing="0">
                        <thead>
                            <tr>
                                <th colspan="2">测评项目</th>
                                <th colspan="4">一般能力</th>
                                <th colspan="8">胜任能力</th>
                                <th colspan="2">专业知识与技能</th>
                            </tr>
                            <tr>
                                <th rowspan="2" colspan="2">专业化能力维度</th>
                                <th rowspan="2">数学运用能力</th>
                                <th rowspan="2">言语理解能力</th>
                                <th rowspan="2">判断推理能力</th>
                                <th rowspan="2">资料分析能力</th>
                                <th colspan="5">通用胜任能力</th>
                                <th colspan="3">专业胜任力</th>
                                <th rowspan="2">专业理论</th>
                                <th rowspan="2">专业技能</th>
                            </tr>
                            <tr>
                                <th>全局意识</th>
                                <th>任务管理</th>
                                <th>沟通与协调</th>
                                <th>指导他人</th>
                                <th>学习能力</th>
                                <th>意图理解</th>
                                <th>文字表达</th>
                                <th>信息收集与整理</th>
                            </tr>
                        </thead>
                      </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End PAge Content -->
</div>
<!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
<script type="text/javascript">
    // word导出事件
    document.getElementById('id-export-file').addEventListener('click', function() {
        // Ensure echarts charts have finished rendering
        setTimeout(() => {
            var charts = document.querySelectorAll('canvas');
            charts.forEach(chart => {
                var dataURL = chart.toDataURL();
                var imgTag = '<img src="' + dataURL + '" />';
                chart.insertAdjacentHTML('beforebegin', imgTag);
                chart.style.display = 'none'; // Hide the original canvas
            });

            // Create a temporary container for the export
            var exportContainer = document.createElement('div');
            exportContainer.id = 'export-container';
            exportContainer.style.width = '100%';

            // Clone ECharts charts
            // var chartContainer = document.getElementById('id-special-raddr').cloneNode(true);
            // exportContainer.appendChild(chartContainer);

            // Clone user table and add border class

            var clonedTable = document.getElementById('id-trafic-table').cloneNode(true);
// 直接添加内联样式到每个th和td元素
            clonedTable.querySelectorAll('th, td').forEach(function(cell) {
                cell.style.border = '1px solid #000';
                cell.style.borderCollapse = 'collapse'; // 注意：borderCollapse是CSS属性，不能作为内联样式设置，但这里为了示例而写
                cell.style.textAlign = 'center';
            });
            exportContainer.appendChild(clonedTable);

            // Convert the export container's HTML to a Word document
            var htmlHeader = `
          <!DOCTYPE html>
          <html>
          <head>
            <style>
               table, th, td {
                   border: 1px solid #000;
                   text-align: center;
                   border-collapse: collapse;
               }
.stat-outstanding-bg {color: #fff; background: #67AD5B;}
.stat-excellent-bg {color: #fff; background: rgba(76, 175, 80, 0.6);}
.stat-good-bg {color: #fff; background: #58a2eb;}
.stat-pass-bg {color: #fff; background: #ffa206;}
.stat-bad-bg {color: #fff; background: #ef5350;}
.stat-inverse-bg {color: #fff; background: #6a707e;}
.stat-outstanding-text {color: rgba(76, 175, 80);}
.stat-excellent-text {color: rgba(76, 175, 80, 0.6);}
.stat-good-text {color: #58a2eb;}
.stat-pass-text {color: #ffa206;}
.stat-bad-text {color: #ef5350;}
.stat-inverse-text{color: #6a707e;}
            </style>
          </head>
          <body>`;
            var htmlFooter = `
          </body>
          </html>`;
            var htmlContent = htmlHeader + exportContainer.innerHTML + htmlFooter;

            var blob = new Blob([htmlContent], { type: 'application/msword' });
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = '专业能力红绿灯预警.doc';
            a.click();
            URL.revokeObjectURL(url);

            // Clean up by removing the temporary container
            exportContainer.remove();

            // Revert changes made to the document for export
            charts.forEach(chart => {
                chart.previousSibling && chart.previousSibling.remove();
                chart.style.display = 'block'; // Restore the original canvas
            });
        }, 1000); // Adjust the timeout as needed to ensure charts have rendered
    });
$(document).ready(function(){
	
	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/sudoku";
		  if(12===val){
			  ctx = "/t/sudoku12";
		  }
		  window.location.href="${ROOT}" + ctx;
	});

	var $table = null;
	var convertDataToView = function(allData){		
		
		if($table) {
			$table.fnClearTable();
			$table.fnDestroy();
		}
		
		$table = $("#id-trafic-table").dataTable({
		    "ordering":false,
		    "searching": false,
		    "bFilter":false,
		    "info": false,
		    "paging": false,
		    'bAutoWidth':false,
		    "bDestroy" : true,
		    "aoColumns": [
	   	        //设置列
	   	        {'mData': 'no',  'sWidth':'120px', defaultContent: '', 'sClass': 'cell-no-wrap' },
	   	        {'mData': 'name','sWidth':'120px', defaultContent: '', 'sClass': 'cell-no-wrap' },
	   	        {'mData': 'sxyy','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'yylj','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'pdtl','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'zlfx','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'qjys','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'rwgl','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'gtxt','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'zdtr','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'xxnl','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'ytlj','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'wzbd','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'zhsrl','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'zyll','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'zyjn','sWidth':'120px', defaultContent: '' }
	   	    ],
	   	    "aoColumnDefs": [{
	   	        'sDefaultContent': '',
	   	        'aTargets': [1],
	   	        'mRender':function(id,type,object){
	   	        	return "&nbsp;<a href='${ROOT}/t/traficProfile?id="+object.no+"'><b>"+object.name+"</b></a>&nbsp;";
	   	        }
	   	    }
	   	    ],
	   	    "createdRow": function(row, object, index){
	   	        	for(var col=2; col<=15; col++){
		   	        	var value=0.0;
		   	        	switch(col){
		   	        	case 2:
		   	        		value=object.sxyy;
		   	        		break;
		   	        	case 3:
		   	        		value=object.yylj;
		   	        		break;
		   	        	case 4:
		   	        		value=object.pdtl;
		   	        		break;
		   	        	case 5:
		   	        		value=object.zlfx;
		   	        		break;
		   	        	case 6:
		   	        		value=object.qjys;
		   	        		break;
		   	        	case 7:
		   	        		value=object.rwgl;
		   	        		break;
		   	        	case 8:
		   	        		value=object.gtxt;
		   	        		break;
		   	        	case 9:
		   	        		value=object.zdtr;
		   	        		break;
		   	        	case 10:
		   	        		value=object.xxnl;
		   	        		break;
		   	        	case 11:
		   	        		value=object.ytlj;
		   	        		break;
		   	        	case 12:
		   	        		value=object.wzbd;
		   	        		break;
		   	        	case 13:
		   	        		value=object.zhsrl;
		   	        		break;
		   	        	case 14:
		   	        		value=object.zyll;
		   	        		break;
		   	        	case 15:
		   	        		value=object.zyjn;
		   	        		break;
		   	        	}

		   	        	var cls ="";
		   	        	if(value>=7)
		   	        		cls="stat-outstanding-bg";
		   	        	else if(value>=5)
		   	        		cls="stat-pass-bg";
		   	        	else
		   	        		cls="stat-bad-bg";
		   	        	$('td', row).eq(col).addClass(cls);
	   	        	}
	   	     },
		    "data":allData
		});
		$table.fnDraw();
	};

    //初始化过滤面板
    $.post('${ROOT}/t/treeNav',function(data, status){
    	if(data.code==="ok"){
			$.fn.filterBox({
				data: data.data,
				onsubmit: function(form, data){
				    $.post('${ROOT}/t/sumtrafic',data,function(data, status){
				    	if(data.code==="ok"){
				    		if( data.data){
						    	convertDataToView(data.data);
					    	}else{
					    		toastr.error("未找到任何资料");
					    	}
				    	}else{
				    		toastr.error(data.desc);
				    	}
				    }, 'json');
				}
			})
    	}
    });
    
    // 导出事件绑定
    // $('#id-export-file').click(function(){
    // 	var pdfCanvas = $.fn.pdfcanvas({
    // 		title: '专业能力红绿灯预警',
    // 		keywords: '单位和部门：；岗位类别：'
    // 	})
    // 	pdfCanvas.addDom(document.getElementById("id-trafic-table"));
    // 	pdfCanvas.print();
    //
    // });

    //先提取数据
    $.post('${ROOT}/t/lsttrafic',function(data, status){
    	if(data.code==="ok"){
    		if( data.data){
		    	convertDataToView(data.data);
	    	}else{
	    		toastr.error("未找到任何资料");
	    	}
    	}else{
    		toastr.error(data.desc);
    	}
    }, 'json');
});
</script>
</@panel.footer>
</#escape>
